<template>
  <div class="poiContainer" ref="wrapper" v-show="GFshow">
    <div ref="header" class="drag-bar-header"></div>
    <el-tree
      ref="treeRef"
      :data="treeData"
      :default-checked-keys="checkedList"
      show-checkbox
      node-key="id"
      :props="defaultProps"
      @check-change="checkHandler"
    >
      <template #default="{ data }">
        <span>
          {{ data.label }}
        </span>
        <img
          :class="data.class"
          :style="{
            border: data.border,
            backgroundColor: data.backgroundColor,
          }"
        />
      </template>
    </el-tree>
  </div>
</template>

<script>
/*eslint-disable */
import axios from "axios";
import { getCurrentInstance, onMounted, ref } from "vue-demi";
import url from "@/components/URL.json";
import pubsub from "pubsub-js";

export default {
  name: "groundFeatures",
  data() {
    return {
      GFshow: true,
      defaultProps: {
        children: "children",
        label: "label",
      },
      checkedList: [-2],
      wrapperDom: null,
      headerDom: null,
      disX: 0,
      disY: 0,
      minLeft: 0,
      maxLeft: 0,
      minTop: 0,
      maxTop: 0,
      prevLeft: 0,
      prevTop: 0,
      treeData: [
        {
          id: "-2",
          label: "实景模型",
        },
        {
          id: "997",
          label: "网格区划",
        },
        {
          id: "998",
          label: "全村房屋面",
        },
        {
          id: "996",
          label: "土地利用现状",
        },
        {
          id: "-1",
          label: "供电专题",
          children: [
            {
              id: "999",
              label: "变压器",
            },
            {
              id: "9991",
              label: "供电范围",
            },
            // {
            //   id: "9992",
            //   label: "推荐台区",
            // },
          ],
        },
        {
          id: "-1",
          label: "城市部件",
          children: [
            {
              id: "0",
              label: "供电井盖",
            },
            {
              id: "0",
              label: "监控电子眼",
            },
            {
              id: "0",
              label: "上水井盖",
            },
            {
              id: "0",
              label: "市政排水井盖",
            },
            {
              id: "0",
              label: "市政消火栓",
            },
            {
              id: "0",
              label: "照明设施",
            },
          ],
        },

        {
          id: "-1",
          label: "规划专题",
          children: [
            {
              id: "995",
              label: "国有土地",
              class: "polygonIcon",
              border: "#d81e06 2.5px solid",
              backgroundColor: "#d81e06",
            },
            {
              id: "995",
              label: "基本农田",
              class: "polygonIcon",
              border: "#f4ea2a 2.5px solid",
              backgroundColor: "#f4ea2a",
            },
          ],
        },
      ],
    };
  },
  setup() {
    const { proxy } = getCurrentInstance();
    const treeRef = ref(null);

    onMounted(() => {
      // pubsub.subscribe("GFshowChange", (n, data) => {
      //   proxy.GFshow = data;
      // });
      setTimeout(() => {
        Array.from(document.querySelectorAll(".el-tree-node__label")).forEach(
          (e) => {
            e.style["color"] = "#1296db";
          }
        );
      }, 100);
    });

    //节点开关处理函数
    function expandHandler() {
      setTimeout(() => {
        Array.from(document.querySelectorAll(".el-tree-node__label")).forEach(
          (e) => {
            e.style["color"] = "#1296db";
          }
        );
      }, 100);
    }

    // 选框开关处理函数
    function checkHandler(node, isChecked) {
      let tableList = ["城市部件", "公共设施", "重点场所"];
      // 行头节点开关过滤
      if (node.id != "-1" && node.id != "3") {
        // 变压器
        if (node.id === "999") {
          axios({
            method: "get",
            url: url.basicURL + "getTransformer",
          }).then((res) => {
            // console.log(res.data);
            pubsub.publish("transFormerPOI", { isChecked, data: res.data });
          });
        }
        // 供电范围
        else if (node.id === "9991") {
          pubsub.publish("supplyRange", isChecked);
        }
        // 推荐台区
        else if (node.id === "9992") {
          pubsub.publish("recommendPolygon", isChecked);
        }
        // 实景模型
        else if (node.id === "-2") {
          pubsub.publish("modelShowChange", isChecked);
        }
        // 全村房屋面
        else if (node.id === "998") {
          pubsub.publish("housePolygonShow", isChecked);
        }
        //网格线
        else if (node.id === "997") {
          pubsub.publish("showNet", isChecked);
        }
        // 土地利用现状
        else if (node.id === "996") {
          pubsub.publish("landUse", isChecked);
        }
        // 规划图层&&管线图层
        else if (node.id === "995") {
          // treeRef.value.setChecked("-2", false, false);
          let color = node.backgroundColor
            ? node.backgroundColor
            : node.border.split(" ")[0];
          pubsub.publish("AddJson", {
            label: node.label,
            isChecked,
            color: color,
          });
        } else {
          // 获取要开关的poi名字
          let poi = node.label;
          // 获取表名
          let table = tableList[Number(node.id)];
          // 开启图层
          if (isChecked) {
            getPOI(table, poi);
          }
          // 关闭图层
          else {
            pubsub.publish("POIshowOff", poi);
          }
        }
      }
    }

    //从数据库读取poi信息
    function getPOI(table, poi) {
      axios({
        method: "get",
        url: url.basicURL + "groundFeatures",
        params: { db: table, poi: poi },
      }).then((res) => {
        console.log(res.data);
        pubsub.publish("POIshowOn", res.data);
      });
    }

    return {
      treeRef,
      expandHandler,
      checkHandler,
    };
  },
  methods: {
    initDrag() {
      this.wrapperDom = this.$refs.wrapper;
      this.headerDom = this.$refs.header;
      this.headerDom.addEventListener("mousedown", this.onMousedown, false); //点击头部区域拖拽
    },
    onMousedown(e) {
      this.disX = e.clientX - this.headerDom.offsetLeft;
      this.disY = e.clientY - this.headerDom.offsetTop;

      this.minLeft = this.wrapperDom.offsetLeft;
      this.minTop = this.wrapperDom.offsetTop;

      this.maxLeft =
        window.innerWidth - this.minLeft - this.wrapperDom.offsetWidth;
      this.maxTop =
        window.innerHeight - this.minTop - this.wrapperDom.offsetHeight;

      const { left, top } = getComputedStyle(this.wrapperDom, false);
      this.prevLeft = parseFloat(left);
      this.prevTop = parseFloat(top);

      document.addEventListener("mousemove", this.onMousemove, false);
      document.addEventListener("mouseup", this.onMouseup, false);
      document.body.style.userSelect = "none"; //消除拖拽中选中文本干扰
    },
    onMousemove(e) {
      let left = e.clientX - this.disX;
      let top = e.clientY - this.disY;

      if (-left > this.minLeft) {
        left = -this.minLeft;
      } else if (left > this.maxLeft) {
        left = this.maxLeft;
      }

      if (-top > this.minTop) {
        top = -this.minTop;
      } else if (top > this.maxTop) {
        top = this.maxTop;
      }

      this.wrapperDom.style.left = this.prevLeft + left + "px";
      this.wrapperDom.style.top = this.prevTop + top + "px";
    },
    onMouseup() {
      document.removeEventListener("mousemove", this.onMousemove, false);
      document.removeEventListener("mouseup", this.onMouseup, false);
      document.body.style.userSelect = "auto"; //恢复文本可选中
    },
  },
  mounted() {
    this.initDrag();
  },
};
</script>

<style lang="less" scoped>
.poiContainer {
  font-size: 150%;
  border-radius: 5px;
  position: absolute;
  right: 1%;
  top: 1%;
  z-index: 10000;
  width: 11.5%;
  // width: 10%;
  > .drag-bar-header {
    background-color: white;
    height: 15px;
    // width: 204.8px;
    width: 9999px;
  }
  > .el-tree {
    padding: 2% 2%;
    padding-bottom: 7%;
  }
}

.polygonIcon {
  width: 20px;
  height: 20px;
  margin-bottom: 1px;
  // border: #1296db 2.5px solid;
  margin-left: 2.5%;
  border-radius: 15%;
  color: transparent;
}

.polyLineIcon {
  // background-color: #1296db;
  border: transparent;
  width: 30px;
  height: 3px;
  margin-bottom: 5px;
  margin-left: 5%;
  color: transparent;
}

.drag-bar-header:hover {
  background-color: #1296db;
}
</style>